@use "../../style/lib/svg";

.icon-about {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path fill="#333" d="M511.52 427.07c-22.45 0-40.65 18.22-40.65 40.69l.15 247.92c0 22.47 18.2 40.69 40.65 40.69s40.65-18.22 40.65-40.69l-.15-247.92c0-22.47-18.2-40.69-40.65-40.69zm.59-362.85C265.12 64.22 64.9 264.65 64.9 511.89c0 77.83 19.85 151.01 54.75 214.77 4.82 17.09 20.5 29.62 39.12 29.62 22.45 0 40.65-18.22 40.65-40.69l-.37-3.78c0-17.04-10.47-31.63-25.32-37.69l6.25-6.25C157.54 620.38 145 567.3 145 511.29c0-202.63 164.1-366.88 366.52-366.88s366.51 164.26 366.51 366.88-164.1 366.88-366.51 366.88c-79.76 0-153.55-25.52-213.71-68.82-7.46-9.09-18.77-14.89-31.43-14.89-22.45 0-40.65 18.22-40.65 40.69l.37 3.78c0 18.11 11.83 33.46 28.17 38.73 72.87 51.57 161.82 81.89 257.85 81.89 246.99 0 447.22-200.43 447.22-447.67-.01-247.23-200.23-447.66-447.23-447.66zM555.2 307.7c0-24.15-19.56-43.73-43.68-43.73s-43.68 19.58-43.68 43.73l.17 1.31c0 24.15 19.56 43.73 43.68 43.73s43.68-19.58 43.68-43.73l-.17-1.31z"/></svg>'
  );

  @media (prefers-color-scheme: dark) {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path fill="#bbb" d="M511.52 427.07c-22.45 0-40.65 18.22-40.65 40.69l.15 247.92c0 22.47 18.2 40.69 40.65 40.69s40.65-18.22 40.65-40.69l-.15-247.92c0-22.47-18.2-40.69-40.65-40.69zm.59-362.85C265.12 64.22 64.9 264.65 64.9 511.89c0 77.83 19.85 151.01 54.75 214.77 4.82 17.09 20.5 29.62 39.12 29.62 22.45 0 40.65-18.22 40.65-40.69l-.37-3.78c0-17.04-10.47-31.63-25.32-37.69l6.25-6.25C157.54 620.38 145 567.3 145 511.29c0-202.63 164.1-366.88 366.52-366.88s366.51 164.26 366.51 366.88-164.1 366.88-366.51 366.88c-79.76 0-153.55-25.52-213.71-68.82-7.46-9.09-18.77-14.89-31.43-14.89-22.45 0-40.65 18.22-40.65 40.69l.37 3.78c0 18.11 11.83 33.46 28.17 38.73 72.87 51.57 161.82 81.89 257.85 81.89 246.99 0 447.22-200.43 447.22-447.67-.01-247.23-200.23-447.66-447.23-447.66zM555.2 307.7c0-24.15-19.56-43.73-43.68-43.73s-43.68 19.58-43.68 43.73l.17 1.31c0 24.15 19.56 43.73 43.68 43.73s43.68-19.58 43.68-43.73l-.17-1.31z"/></svg>'
    );
  }
}

.icon-add {
  @include svg.background-svg(
    '<svg viewBox="0 0 1024 1024"><path fill="#333" d="M896 448H576V128H448v320H128v128h320v320h128V576h320z"/></svg>'
  );

  @media (prefers-color-scheme: dark) {
    @include svg.background-svg(
      '<svg viewBox="0 0 1024 1024"><path fill="#bbb" d="M896 448H576V128H448v320H128v128h320v320h128V576h320z"/></svg>'
    );
  }
}
